<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* div {
            width: 500px;
            border: 1px red solid;
            /* 可选值
             left 左侧对齐
             right 右侧对齐
             center 居中对齐
             justify 两端对齐
             * /

            /* text-align: justify; * /
            font-size: 50px;
        } */

        .box1 {
            font-size: 50px;
            /* text-decoration: line-through red dotted; ie浏览器不支持颜色改变*/
            text-decoration: underline ;
            /* text-decoration设置文本修饰
            可选值
               none 什么都没有
               underline  下划线
              line-through  删除线
              overline 上划线     
            */
        }

        span {
            font-size: 20px;
            border: 1px blue solid;
            /*  vertical-align  设置元素垂直对齐的方式
                可选值
       baseline  默认值，基线对齐
       top   顶部对齐
       bottom 底部对齐
        middle  居中对齐
    */
            vertical-align: middle;
        }

        p {
            border: 1px red solid;
        }

        img {
            vertical-align: top;
            /* 出去底线的缝隙 */
        }
        .box2{
            width: 200px;
            /*  white-space 设置网页如何设置处理空白
            可选值
               normal 正常
               nowrap 不换行
               pre 保留空白

            */
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            /* 溢出内容显示省略号 */
        }
    </style>
</head>

<body>
    <div class="box2">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta vel blanditiis nihil obcaecati facere voluptas delectus, beatae, esse adipisci asperiores excepturi officiis, ad ipsa. Unde quasi similique voluptatum voluptatibus dolore?
    </div>

    <div class="box1">天气hello<span>真不错hello</span>!</div>
    <!-- <div>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos amet iusto, nostrum quae totam qui culpa aliquam voluptatibus quis ut autem ullam, officiis architecto ad. Ut eligendi reiciendis consequatur suscipit!
    </div> -->
    <p>
        <img src="../exercise/resourse/1img/fbdead9b5857c2f6.jpg" alt="">
    </p>
</body>

</html>